<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="pages/system/css/historyBoard.css">
<style type="text/css">
	#customer_search_form .select2 {
	    width: 190px !important;
	}

	.echarts {
	    width: 100%;
	    min-height: 400px;
	    overflow: hidden;
	    height: auto !important;
	}

	.board-title {
	    font-size: 18px;
	    font-weight: normal;
	    font-style: normal;
	    font-variant: normal;
	    font-family: "Microsoft YaHei";
	    color: #008acd;
	    margin-left: 6px;
	}

	.echarts-title {
	    color: #008acd !important;
	    margin-left: 8px !important;
	}

	.my-select {
	    width: 180px !important;
	}

	.my-label {
	    margin-top: 20px !important;
	}
</style>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                <li><span class="c-999">看板管理<i
				class="icon-angle-right"></i></span>
                </li>
                <li><a class="c-666" onclick="util.showContent('pages/system/historyBoard.jsp')">历史数据看板</a></li>
            </ul>
        </div>
    </div>
    <div class="search-box" style="width: 99%;">
        <div class="search-title">
            <span class="search-criteria c-666">&nbsp;查询条件</span>
        </div>
        <form id="customer_search_form">
            <table class="search-body" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td>
                        <label class="my-label">
                            电池ID：
                            <select id="query_pack_code" class="my-select enterSearch">
                                <option value=""></option>
                            </select>
                        </label>
                        <label class="my-label">
                            开始时间：
                            <input id="query_startTime" class="data-picker Wdate enterSearch" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})" />
                        </label>
                        <label class="my-label">
                            结束时间：
                            <input id="query_endTime" class="data-picker Wdate enterSearch" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})" />
                        </label>
                        <select id="shortcut_time"  class="my-select enterSearch">
                            <option value="5">快捷时间</option>
                            <option value="0">昨天</option>
                            <option value="1">上周</option>
                            <option value="2">上月</option>
                            <option value="3">上季度</option>
                            <option value="4">去年</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="my-label">
                            图表1：
                            <select id="board1"  class="my-select enterSearch">
                                <option value="0">SOC</option>
                                <option value="1">总电压</option>
                                <option value="2">总电流</option>
                                <option value="3">监测点最高温度</option>
                                <option value="4">监测点温度极值与温差</option>
                                <option value="5">单体电压极值与压差</option>
                                <option value="6">监测点温度值曲线</option>
                                <option value="7">单体电压值曲线</option>
                                <option value="8">历史轨迹</option>
                            </select>
                        </label>
                        <label class="my-label">
                            图表2：
                            <select id="board2"  class="my-select enterSearch">
                                <option value="0">SOC</option>
                                <option value="1">总电压</option>
                                <option value="2">总电流</option>
                                <option value="3">监测点最高温度</option>
                                <option value="4">监测点温度极值与温差</option>
                                <option value="5">单体电压极值与压差</option>
                                <option value="6">监测点温度值曲线</option>
                                <option value="7">单体电压值曲线</option>
                                <option value="8">历史轨迹</option>
                            </select>
                        </label>
                        <label class="my-label">
                            图表3：
                            <select id="board3"  class="my-select enterSearch">
                                <option value="0">SOC</option>
                                <option value="1">总电压</option>
                                <option value="2">总电流</option>
                                <option value="3">监测点最高温度</option>
                                <option value="4">监测点温度极值与温差</option>
                                <option value="5">单体电压极值与压差</option>
                                <option value="6">监测点温度值曲线</option>
                                <option value="7">单体电压值曲线</option>
                                <option value="8">历史轨迹</option>
                            </select>
                        </label>
                        <label class="my-label">
                            图表4：
                            <select id="board4"  class="my-select enterSearch">
                                <option value="0">SOC</option>
                                <option value="1">总电压</option>
                                <option value="2">总电流</option>
                                <option value="3">监测点最高温度</option>
                                <option value="4">监测点温度极值与温差</option>
                                <option value="5">单体电压极值与压差</option>
                                <option value="6">监测点温度值曲线</option>
                                <option value="7">单体电压值曲线</option>
                                <option value="8">历史轨迹</option>
                            </select>
                        </label>
                    </td>
                </tr>
            </table>
        </form>
        <ul class="search-button">
            <li>
                <button class="btn blue" id="btn_query">查&nbsp;&nbsp;询</button>
            </li>
        </ul>
    </div>
    <div class="table-con" style="margin-bottom: 25px;width: 99%;">
        <div class="table-head">
            &nbsp;&nbsp;&nbsp; <i class="icon-bar-chart"></i> &nbsp;历史看板
        </div>
        <div class="list-body" style="overflow:visible">
            <div class="table-responsive" id="test">
                <div class="history-board" id="history_board1" style="width:99%;min-height:400px;overflow: visible;height:auto !important;"></div>
                <div class="history-board" id="history_board2" style="width:99%;min-height:400px;overflow: visible;height:auto !important;"></div>
                <div class="history-board" id="history_board3" style="width:99%;min-height:400px;overflow: visible;height:auto !important;"></div>
                <div class="history-board" id="history_board4" style="width:99%;min-height:400px;overflow: visible;height:auto !important;"></div>
            </div>
        </div>
    </div>
</div>
<!-- 模态窗口 str -->
<jsp:include page="/pages/common/modal.jsp"></jsp:include>
<script type="text/javascript" src="script/echarts/js/macarons.js"></script>
<script type="text/javascript" src="pages/system/js/historyBoard.js"></script>
<script src="media/js/ui-modals.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    var packCode = '<%=request.getParameter("packCode")%>';
    historyBoard.init(packCode);
    UIModals.init();
});
</script>